{% extends "base.html" %}
{% block content %}

<style>
    .card {

        margin-bottom:5px;
    }

    #HoverCard:hover {
        background-color: #ff6d00;
        transition: all 0.5s ease;
    }

</style>

    <div class="container" style="position: relative;text-align: center;color: white;">
        <img src="https://cdn.britannica.com/41/123141-050-E6229449/Air-New-Zealand-Boeing-747-400.jpg" alt="Banner" style="width:100%;">
        <div class="container" style="background-color:lightgrey; border-style:none;  position:relative; z-index:200; height:110px; top:-70px;">
            <div class="row">

                <div>
                    <img src="https://i.stack.imgur.com/YQu5k.png" style="height:100px; position:relative; top:5px; left:10px; border: solid grey 10px; border-radius: 10px;">
                </div>
                

                <div style="position: relative;bottom: 1px;left: 30px;"><h1>Big Buns Airliner Corp</h1> 
                    <div class="row" style="position:relative;bottom: 1px;left: 18px;">Miami, Florida  &#9679 189 Followers</div>
                <div class="row" style="position:relative;bottom: 2px;left: 18px;">Some stuff about stuff.</div>
                </div>


                <div style="position: absolute;bottom: 8px;right: 30px;"><button type="button" class="btn btn-success btn-lg">+ Follow</button></div>

            </div>
            
        </div>
        
    </div>
    

    <div class="container" style="position:relative; top:-60px;">
        <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="feed-tab" data-toggle="tab" href="#feed" role="tab" aria-controls="feed" aria-selected="true">Feed</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="jobs-tab" data-toggle="tab" href="#jobs" role="tab" aria-controls="jobs" aria-selected="false">Jobs</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
            </li>
        </ul>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="feed" role="tabpanel" aria-labelledby="nav-feed-tab">
                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

                    </div>
                </div>
                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

                    </div>
                </div>
                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

                    </div>
                </div>
                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>

                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="jobs" role="tabpanel" aria-labelledby="nav-jobs-tab">

                {%for job in jobs%}
                {%csrf_token%}

                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <form method='post' id=1>
                            {%csrf_token%}
                            
                            <div class="row">
                                <div class="col">
                                    {{job.title}}

                                    <h5 class="card-title"><input class="form-control here" type="hidden" name="name" value="{{job.title}}"></h5>
                                    {{job.jobtype}}

                                    <p class="card-text"><input class="form-control here" type="hidden" name="type" value="{{job.jobtype}}"></p>
                                    {{job.description}}

                                    <p class="card-text"><input class="form-control here" type="hidden" name="description" value="{{job.description}}"></p>
                                </div>

                                <div class="col ml auto">
                                    <button type="submit" style="margin-top:40px; float:right" class="btn btn-primary" , name='apply'>
                                        <a><b>Apply</b></a>
                                    </button>
                                </div>
                            </div>
                        </form>
                        

                    </div>
                </div>

                {%endfor%}

                <div class="card" id="HoverCard">
                    <div class="card-body">
                        <h5 class="card-title">Yo Some Job</h5>
                        <p class="card-text">Apply to this job dude.</p>

                    </div>
                </div>

            </div>
            <div class="tab-pane fade" id="about" role="tabpanel" aria-labelledby="nav-about-tab">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">About COMPANY</h5>
                        <p class="card-text">
                            What is Lorem Ipsum?
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>

                    </div>
                </div>
            </div>
        </div>
    </div>
    

{% endblock %}